<!DOCTYPE html>
<html>
<head>
	<#include "header.ftl">
	<script src="http://api.map.baidu.com/api?v=1.3"></script>
	<style>
		img{
		max-width: none;
		}
	</style>
</head>
<body>
	<#include "nav.ftl">
	<div class="container">
		<div class="section slice no-padding">
        <div id="mapCanvas" class="map-canvas no-margin" style="height:400px;">
        	<script type="text/javascript">
			   var map = new BMap.Map("mapCanvas");            // 创建Map实例
			var point = new BMap.Point("104.067821", "30.8211");    // 创建点坐标
			map.centerAndZoom(point,15);                // 初始化地图,设置中心点坐标和地图级别。
			map.enableScrollWheelZoom();                  //启用滚轮放大缩小
			//添加缩放控件
			map.addControl(new BMap.NavigationControl());  
			map.addControl(new BMap.ScaleControl());  
			map.addControl(new BMap.OverviewMapControl()); 
			
			var marker = new BMap.Marker(point); // 创建标注 
			map.addOverlay(marker); // 将标注添加到地图中
			var infoWindow = new BMap.InfoWindow("XX财税咨询公司<br/><span class=''>地址：成都市新都区斑竹园镇</span>"); // 创建信息窗口对象
			marker.openInfoWindow(infoWindow);
			   </script>
    </div>
    <div class="container">
    <div class="row">
        <div class="col-md-6">
        	<h3 class="section-title">给我留言</h3>
        	<form id="contact_form" method="post"
				class="form-horizontal" autocomplete="off"
				action="${BASE_PATH}/guestbook/add.json">
        		 <div class="row">
      <div class="col-xs-8 col-sm-6">
			  <div class="form-group">
			    <label for="exampleInputEmail1">姓名</label>
			    <input type="text" class="form-control" id="" name="name" placeholder="姓名">
			  </div>
			  </div>
			  <div class="col-xs-8 col-sm-6">
			  <div class="form-group">
			    <label for="exampleInputPassword1">联系电话</label>
			    <input type="text" class="form-control" id="" name="phone" placeholder="联系电话">
			  </div>
			  </div>
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">邮箱</label>
			    <input type="email" class="form-control" id="" name="email" placeholder="邮箱">
			  </div>
			  <div class="form-group">
			  	<label for="exampleInputPassword1">内容</label>
			  	<textarea class="form-control" rows="3" name="content"></textarea>
			  </div>
			  <button type="submit" class="btn btn-default">发送</button>
			</form>
        </div>
        <div class="col-md-6">
                    <h3 class="section-title">联系方式</h3>
                    <div class="contact-info">
                        <h5>地址</h5>
                        <p>${SYS_ADDRESS}</p>
                        <h5>邮箱</h5>
                        <p>${SYS_EMAIL}</p>
                        <h5>电话</h5>
                        <p>${SYS_PHONE}</p>
                    </div>
                     <h3 class="section-title">快捷交流</h3>
                    <p>
                   点击以下QQ图标，免加好友即时洽谈合作
                    </p>
                    <div class="social-media">
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=${SYS_QQ}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:${SYS_QQ}:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=${SYS_QQ}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:${SYS_QQ}:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=${SYS_QQ}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:${SYS_QQ}:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
                    </div>
        </div>
    </div>
    </div>
	<#include "script.ftl">
	<#include "footer.ftl">
	<script src="${BASE_PATH}/static/manage/js/jquery.form.min.js"></script>
		<script src="${BASE_PATH}/static/manage/js/bootbox.min.js"></script>
	<script>
		$('#contact_form').ajaxForm({
			dataType : 'json',
			success : function(data) {
				if (data.result) {
					bootbox.alert("留言成功，将刷新页面", function() {
						window.location.reload();
					});
				}else{
					showErrors($('#addFolder_form'),data.errors);
				}
			}
		});
	</script>
</body>
</html>